<script lang="ts" setup>
import 'vant/es/toast/style';
import { Toast } from "vant";
import { ref, toRefs } from "vue";


const props = defineProps<{
    countNum: number
}>()

const { countNum } = toRefs(props)

let toggleLaud = ref<boolean>();
let laud = ref<string>();
let count = ref<number>(0);

toggleLaud.value = false;

function updateLaud(num: number) {
    count.value = num;
    if (toggleLaud.value) {
        toggleLaud.value = false;
        laud.value = require("../../assets/card/feeds_laud_default.png")
        Toast('取消点赞');
    }
    else {
        toggleLaud.value = true;
        count.value++;
        laud.value = require("../../assets/card/feeds_laud_selected.png")
        Toast('点赞成功');
    }
}
</script>

<template>
    <div class="flex items-center">
        <img class="w-10 h-10" @click="updateLaud(countNum)"
            :src="laud || require('../../assets/card/feeds_laud_default.png')" alt="laud">
        <Transition name="move" v-if="countNum">
            <div class="text-gray-400 ml-2">{{ count != 0 ? count : countNum }}</div>
        </Transition>
    </div>
</template>

<style>
.move-enter {
    transform: translateY(100%);
}

.move-leave-to {
    transform: translateY(-100%);
}

.move-enter-active,
.move-leave-active {
    transition: all linear 0.5s;
}

.move-leave,
.move-enter-to {
    transform: translateY(0);
}
</style>